<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分区元素</title>
</head>
<body>
<!--块区域元素 默认宽度是父级宽度的100%高度为0 考内容撑起-->
这是上边,是不是很神奇,我明明没有换行,但是却换行了
<div style="background-color: pink">粉红少女</div>
这是下变

<!--行内分区元素  span  被这个包裹的 不换行,用来选中其中的内容-->
昨天家里没电,<span style="color: pink">冰淇淋</span>全化了

<hr>
<header>头部</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<main>内容主体</main>
<section>区域</section>
<article>文章</article>
<footer>页脚</footer>
<hr>
<div class="header">头头</div>
<div class="nav">导航</div>
<div class="main">主体</div>
<div class="section">区域</div>
<div class="article">文章</div>
<div class="footer">页脚</div>
<hr>

</body>
</html>